<script setup>
import { ref } from 'vue'
import Editor from '@tinymce/tinymce-vue'
import {zyOffice} from '/public/zyoffice/js/w'
import '/public/layer-v3.1.1/layer/layer'
import '/public/layer-v3.1.1/layer/theme/default/layer.css'

defineProps({
  msg: String
})

const edtData = "zyOffice-vue3-cli-tinymce5"
const init= {
          selector: 'textarea',
          //汉化,路径是自定义的，一般放在public或static里面，汉化文件要自己去下载
          //language_url: '/tinymce/zh_CN.js',
          //language: 'zh_CN',
          //皮肤
          skin: 'oxide',
          //隐藏技术支持
          branding: false,
          //隐藏底栏的元素路径
          elementpath: false,
          //关闭菜单
          menubar: false,
          //隐藏状态栏
          statusbar: false,
          //公式插件
          external_plugins: {
            zyoffice: '/public/zyoffice/plugin/zyoffice.js',
            zywordexport: '/public/zyoffice/plugin/zywordexport.js',
            zyofficepdf: '/public/zyoffice/plugin/zyofficepdf.js'            
          },
          //工具栏
          toolbar: 'bold italic underline forecolor fontselect fontsizeselect | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | tiny_mce_wiris_formulaEditor tiny_mce_wiris_formulaEditorChemistry | image zyoffice zywordexport zyofficepdf',          //高度
          height: 200,
          //粘贴data格式的图像
          paste_data_images: true,
          width: 900 ,
          setup:function(edt){}
        }
      
//初始化
zyOffice.getInstance({
  word: 'http://localhost:13710/zyoffice/word/convert',
  wordExport: 'http://localhost:13710/zyoffice/word/export',
  pdf: 'http://localhost:13710/zyoffice/pdf/upload'  
});
</script>

<template>
  <h1>{{ msg }}</h1>
<editor api-key="n84rpcpk3u22bnr0oy1q9s8w78975r67ivfdosf04jwv6pn2" :init="init" v-model="edtData"/>
<p>第二个编辑器</p>
<editor api-key="n84rpcpk3u22bnr0oy1q9s8w78975r67ivfdosf04jwv6pn2" :init="init" v-model="edtData"/>
</template>

<style scoped>
a {
  color: #42b983;
}
</style>
